<template>
  <div class="container">
    <el-card>
      <!-- 头部表单 -->
      <el-form :inline="true" size="small" :model="formData" ref="searchForm">
        <el-row type="flex" justify="space-between">
          <el-row type="flex" justify="soace-between" style="width: 100%">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                v-model="formData.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="formData.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-row>
          <el-row>
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="addArticle"
              >新增技巧
            </el-button>
          </el-row>
        </el-row>
      </el-form>
      <el-alert
        :title="'数据一共' + page.total + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="articleList"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column label="序号" width="60" type="index">
        </el-table-column>
        <el-table-column label="文章标题" width="400">
          <template slot-scope="{ row }">
            <div>{{ row.title }}<a v-if="row.videoURL" href="#" @click='showVieo(row.videoURL)' class="el-icon-film" style="padding-left:10px; color:blue;"></a></div>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="{ row }">
           <span>{{ row.createTime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          width="100"
          label="状态"
          :formatter="formatState"
        >
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{ row }">
            <el-button type="text" @click="preview(row.id)">预览</el-button>
            <el-button type="text" @click="changeState(row)">{{row.state ? '启用' : '禁用'}}</el-button>
            <el-button type="text" :disabled="row.state ? true : false" @click="editArticle(row.id)">修改 </el-button>
            <el-button type="text" :disabled="row.state ? true : false" @click="delArticle(row.id)">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="footer">
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="page.pagesize"
            layout="prev, pager, next, sizes,jumper"
            :total="page.total"
          >
          </el-pagination>
        </el-row>
      </div>
    </el-card>
     <!-- 播放视频 -->
    <div v-if='showVideoDialog' class='videoShow'>
      <video v-if='showVideoDialog' autoplay controls :src="videoURL"></video>
      <div class="close"> <i @click='showVideoDialog=false' class="el-icon-error"></i></div>
    </div>
    <!-- 添加文章对话框 -->
    <AddArticle ref="add" :showAddDialog.sync="showAddDialog" ></AddArticle>
    <!-- 预览文章对话框 -->
    <PreArticle :showPreviewDialog.sync="showPreviewDialog" :articleDetail="articleDetail"></PreArticle>
  </div>
</template>

<script>
import { list, detail, remove, changeState } from '@/api/hmmm/articles'
import { status } from '@/api/hmmm/constants.js'
import AddArticle from '../components/articles-add.vue'
import PreArticle from '../components/articles-preview.vue'
export default {
  components: {
    AddArticle,
    PreArticle
  },
  data() {
    return {
      page: {
        page: 1, // 当前页码
        pagesize: 5,
        total: 0
      },
      formData: {
        keyword: '',
        state: ''
      },
      showVideoDialog: false, // 控制视频对话框显示
      articleList: [],
      showAddDialog: false,
      showPreviewDialog: false, // 展示预览文章
      articleDetail: {}, // 文章详情
      videoURL: '', // 存放播放视频地址
      state: 0, // 存放文章状态
      id: 0

    }
  },
  created() {
    this.getArticleList(this.page)
  },
  methods: {
    // 获取文章数据
    async getArticleList(val) {
      const { data } = await list(val)
      this.articleList = data.items
      this.page.total = data.counts
      // console.log(data)
    },
    // 格式化状态
    formatState(row, column, cellValue, index) {
      const obj = status.find((item) => item.value === +cellValue)
      return obj ? obj.label : ''
    },
    async handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      const { data: res } = await list(this.page)
      this.articleList = res.items
    },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      const { data: res } = await list(this.page)
      this.articleList = res.items
    },
    // 添加文章对话框
    addArticle() {
      this.showAddDialog = true
    },
    // 预览文章
    async preview(id) {
      const { data } = await detail({ id })
      console.log(data)
      this.articleDetail = data
      this.showPreviewDialog = true
    },
    // 删除文章
    async delArticle(id) {
      this.$confirm('此操作将永久删除文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.getArticleList()
        this.$message.success('删除文章成功')
      }).catch(() => {
        this.$message.warning('删除失败')
      })
    },
    // 修改文章状态
    async changeState(row) {
      // console.log(row)
      if (row.state) {
        this.state = 0
      } else {
        this.state = 1
      }
      await changeState({ id: row.id, state: this.state })
      this.getArticleList()
      this.$message.success('操作成功')
    },
    // 展示视频
    showVieo(url) {
      this.showVideoDialog = true
      this.videoURL = url
    },
    // 修改文章
    editArticle(id) {
      // 点击修改调用子组件的方法
      this.$refs.add.editArticle(id)
      this.showAddDialog = true
    },
    // 搜索
    search() {
      console.log(this.formData)
      if (this.formData.keyword && this.formData.state === '') {
        this.getArticleList({ keyword: this.formData.keyword })
      } else {
        this.getArticleList(this.formData)
      }
    },
    clear() {
      this.$refs.searchForm.resetFields()
    }

  }
}
</script>

<style scoped lang="scss">
.container {
  // width: 100%;
  video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 660px;
    height: 400px;
  }
  .videoShow {
   position: fixed;

    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    z-index: 99999;
    left: 0;
    top: 0;
    margin: auto;
    .close {
      position: absolute;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 60px;
      color: gray;
    }
  }
}
.footer {
  margin-top: 20px;
}
</style>
